<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#div1{
	width:580px;
	margin:0 auto;
	height:400px;
	border:1px solid #DBDBDB;
	margin-top:20px;
	}
#div1 table{
	width:400px;
	margin:0 auto;
	height:400px;
	font-size:15px;
}
#div1 table tr td span{
	font-size:14px;
	color:red;
	margin-left:15px;
	font-weight: none;
}
#div1 table tr td input{
			height:21px;
			border:1px solid #abadb3;
		}
pre{
margin-left:60px;
font-size:13px;
color:red;
}
.select{
			background-color:#ff3f3f;
			border:1px solid #eed8ae;
			color:#ffffff;
			font-size:14px;
			width:50px;
			height:30px;
			border-radius:3px;
		}
.trtd{
width:90px;
font-weight: bold;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-3.1.0.js"></script>
<script type="text/javascript">
	$(function(){
		/*第一次密码判断：*/
		$("input[name='password']").blur(function(){
			var px=$(this).val();
			var ax=/^[a-zA-Z][a-zA-Z0-9_]{5,16}$/;
			if(px==''){
				$("#pspan").text("请填写密码！");
				$(this).val("");
			}else if(!(ax.test(px))){
				$("#pspan").text("密码必须是6-16位！");
				$(this).val("");
			}else{
				$("#pspan").text("*");
			}
			
		});
		/*获得焦点事件：*/
		$("input[name='username']").focus(function(){
			$("#pspan").text("*");
		});
		/*用户名的判断*/
		$("input[name='username']").blur(function(){
			var px=$(this).val();
			var ax=/^[\u4E00-\u9FA5a-zA-Z0-9]{2,4}$/;
			if(px==""){
				$("#uspan").text("请填写用户名！");
			} else if(!ax.test(px)){
				$("#uspan").text("用户名格式错误！");
			}  else{
				$.getJSON("../UserServlet?method=findName",{username:px},function(data){
					if(data=="0"){
						$("#uspan").text("用户名已存在!");
					}else{
						$("#uspan").text("*");
					}
						
				});
			}
			
		});
		/*获得焦点事件：*/
		$("input[name='username']").focus(function(){
			$("#uspan").text("*");
		});
		/*邮箱的判断*/
		$("input[name='email']").blur(function(){
			var px=$(this).val();
			var ax=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
			if(px==''){
				$("#espan").text("请填写邮箱地址！");
			}else if(!ax.test(px)){
				$("#espan").text("邮箱格式不正确！");
			}else{
				$("#espan").text("");
			}
		});
		/*获得焦点事件：*/
		$("input[name='username']").focus(function(){
			$("#espan").text("");
		});
		/*日期判断*/
		$("input[name='birthday']").blur(function(){
			var px=$(this).val();
			var ax=/^(\d{4})-(\d{2})-(\d{2})$/;
			if(px==''){
				$("#bspan").text("请填写出生日期！");
			}else if(!ax.test(px)){
				$("#bspan").text("出生日期格式不正确！");
			}else{
				$("#bspan").text("");
			}
		});
		/*获得焦点事件：*/
		$("input[name='username']").focus(function(){
			$("#bspan").text("");
		});
		/*电话判断*/
		$("input[name='mobilephone']").blur(function(){
			var px=$(this).val();
			var ax=/^(((13[0-9]{1})|(14[0-9]{1})|(17[0]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
			if(px==''){
				$("#mspan").text("请填写电话号码！");
			}else if(!ax.test(px)){
				$("#mspan").text("电话号码格式不正确！");
			}else{
				$("#mspan").text("*");
			}
		});
		/*获得焦点事件：*/
		$("input[name='username']").focus(function(){
			$("#mspan").text("*");
		});
	});
</script>
</head>
<body>
	<div style="margin:0 auto;width:84%;">
	<h3 style="margin-left:40px;margin-top:40px;margin-bottom:10px;">添加会员</h3>
		<pre><b>注意：</b>带有红色*的代表必填内容，请认真填写！</pre>
		<form action="../UserServlet" method="get">
		<input type="hidden" name="method" value="addUsers" />
		<div  id="div1">
			<table style="margin:0 aut0;">
				<tr>
					<td class="trtd">会员名称：</td>
					<td><input type="text" placeholder="会员名2-4位" name="username" value="${username}"/><span id="uspan">*</span></td>
					
					</tr>
					<tr>
					<td class="trtd">会员密码：</td>
					<td><input type="password" placeholder="密码须字母开头" name="password" /><span id="pspan">*</span></td>
				</tr>
				<tr>
					<td class="trtd" >会员性别：</td>
					<td style="font-weight: normal;"><input type="radio" value="1" name="sex" checked="checked"/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="0" name="sex" />女</td>
				</tr>
				<tr>
					<td class="trtd" >会员生日：</td>
					<td><input type="text" placeholder="2018-03-12" name="birthday"/><span id="bspan"></span></td>
					
				</tr>
				<tr>
					<td class="trtd" >邮箱地址：</td>
					<td><input type="text" placeholder="layxz@qq.com" name="email"/><span id="espan"></span></td>	
				</tr>
				<tr>
					<td class="trtd">联系方式：</td>
					<td><input type="text" placeholder="15673321552" name="mobilephone"/><span id="mspan">*</span></td>
					
				</tr>
				<tr>
					<td class="trtd">会员等级：</td>
					<td><input type="text" value="青铜" name="userrank"/></td>
				</tr>
				<tr><td colspan="4" style="text-align:center;"><input class="select" type="submit" value="添加" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input class="select" type="reset" value="重置" /></td></tr>
			</table>
			</div>
		</form>
	</div>
</body>
</html>